/*
 * @Author: liu.lin liu.lin@hzleaper.com
 * @Date: 2023-11-15 13:50:21
 * @LastEditors: liu.lin liu.lin@hzleaper.com
 * @LastEditTime: 2023-11-24 14:08:56
 * @FilePath: \aoi_link_frontend\src\page\line-yield-analyse\component\Header\index.tsx
 * @Description: 封装头部组件
 */
import { FC, useEffect, useState } from 'react';
import { Button, Cascader, Checkbox, DatePicker, Modal, TreeSelect } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { reportDescription } from './index.report';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import './index.less';
import { CascaderOptionType } from '../../index.type';
import moment from 'moment';
import { ParamsType } from './index.type';

const { RangePicker } = DatePicker;
const { SHOW_PARENT } = Cascader;

interface HeaderProps {
  factoryOptions: CascaderOptionType[];
  handleSearch: (param: ParamsType) => void;
  handleExport: (param: ParamsType) => void;
  getTimeFactory: (params: ParamsType) => void;
}

const options = [
  { label: 'POL', value: 'Pear' },
  { label: '偏贴后', value: 'Orange' }
];

// 这个页面根据业务来自行设计吧
const LineYieldAnalyseHeader: FC<HeaderProps> = (props: HeaderProps) => {
  const [isShowReport, setIsShowReport] = useState(false);
  const [cascaderoptions, setCascaderoptions] = useState<CascaderOptionType[]>([]);
  const [time, setTime] = useState([moment().subtract(1, 'week').startOf('day'), moment().endOf('day')]);
  const [cascaderValue, setCascaderValue] = useState([['hefei'], ['nanjing'], ['zhangjiagang']]);
  const [factory, setFactory] = useState<any[]>([]);

  const defaultOptions = [
    [
      {
        value: 'hefei',
        label: '合肥',
        children: [
          {
            value: '1线',
            label: '1线'
          },
          {
            value: '2线',
            label: '2线'
          },
          {
            value: '3线',
            label: '3线'
          }
        ]
      }
    ],
    [
      {
        value: 'nanjing',
        label: '南京',
        children: [
          {
            value: '1线',
            label: '1线'
          },
          {
            value: '2线',
            label: '2线'
          },
          {
            value: '3线',
            label: '3线'
          }
        ]
      }
    ],
    [
      {
        value: 'zhangjiagang',
        label: '张家港',
        children: [
          {
            value: '1线',
            label: '1线'
          },
          {
            value: '2线',
            label: '2线'
          },
          {
            value: '3线',
            label: '3线'
          }
        ]
      }
    ]
  ];

  useEffect(() => {
    setCascaderoptions(props.factoryOptions);
    onCascaderChange(cascaderValue, defaultOptions);
    getTimeFactory();
  }, [props.factoryOptions]);

  /**
   * @description: 数据显示
   * @param {CheckboxValueType} checkedValues
   * @return {*}
   */
  const onCheckboxChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
  };

  const onCascaderChange = (value, selectedOptions) => {
    try {
      let factorys: any[] = [];
      selectedOptions.map(item => {
        if (item.length === 1) {
          const [line] = item;
          let factory_line: any = {};
          factory_line.factoryName = line.label;
          factory_line.lineName = line.children.map(item => {
            return item.value;
          });

          factorys.push(factory_line);
        }

        if (item.length === 2) {
          // 选择了某个工厂下的某一条产线
          const [factory, line] = item;
          const isHas = factorys.some(item => item.factoryName === factory.label);
          if (!isHas) {
            let factory_line: any = {};
            factory_line.factoryName = factory.label;
            factory_line.lineName = [line.value];
            factorys.push(factory_line);
            // factory_line.lineName.push(line.value);
          } else {
            factorys.map(item => {
              if (factory.label === item.factoryName) {
                item.lineName.push(line.value);
              }
            });
          }
        }
      });

      setFactory(factorys);
      console.log(`factorys`, factorys);
    } catch (error) {
      console.log(`error`, error);
    }

    setCascaderValue(value);
  };

  const getTimeFactory = () => {
    const startTime = moment(time[0]).format('YYYY-MM-DD');
    const endTime = moment(time[1]).format('YYYY-MM-DD');
    const params: ParamsType = { startTime, endTime, factory };
    props.getTimeFactory(params);
  };

  /**
   * @description: 打开报表说明框
   * @return {*}
   */
  const handleReport = () => {
    setIsShowReport(true);
  };

  /**
   * @description: 关闭报表说明框
   * @return {*}
   */
  const handleCancel = () => {
    setIsShowReport(false);
  };

  /**
   * @description: 时间选择
   * @param {*} dates
   * @param {array} dateStrings
   * @return {*}
   */
  const handleTimeChange = (dates, dateStrings: [string, string]) => {
    setTime(dates);
  };

  /**
   * @description: 查询的方法
   * @return {*}
   */
  const handleSearch = () => {
    const startTime = moment(time[0]).format('YYYY-MM-DD');
    const endTime = moment(time[1]).format('YYYY-MM-DD');
    const params: ParamsType = { startTime, endTime, factory };
    props.handleSearch(params);
  };

  /**
   * @description: 导出方法
   * @return {*}
   */
  const handleExport = () => {
    const startTime = moment(time[0]).format('YYYY-MM-DD');
    const endTime = moment(time[1]).format('YYYY-MM-DD');
    const params: ParamsType = { startTime, endTime, factory };
    props.handleExport(params);
  };

  return (
    <div className="lya_header">
      <div className="lya_header_item">
        <span className="lya_header_item_span">时间查询:</span>
        <RangePicker value={[time[0], time[1]]} onChange={handleTimeChange} />
      </div>
      <div className="lya_header_item">
        <span className="lya_header_item_span">线体:</span>
        <Cascader
          style={{ width: '200px' }}
          options={cascaderoptions}
          onChange={onCascaderChange}
          value={cascaderValue}
          multiple
          maxTagCount="responsive"
          showCheckedStrategy={SHOW_PARENT}
        />
      </div>
      <div className="lya_header_item">
        <span className="lya_header_item_span"> 数据显示:</span>
        <Checkbox.Group options={options} defaultValue={['Pear', 'Orange']} onChange={onCheckboxChange} />
      </div>
      <div className="lya_header_item">
        <Button type="primary" onClick={handleSearch}>
          查询
        </Button>
      </div>

      <div className="lya_header_item">
        <Button type="primary" onClick={handleExport} icon={<DownloadOutlined />}>
          导出
        </Button>
      </div>
      <div className="lya_header_item" id="lya_header_report" onClick={handleReport}>
        报表说明
      </div>

      <Modal title={<h1 className="centered-title">报表说明</h1>} open={isShowReport} footer={null} onCancel={handleCancel}>
        <div>
          {reportDescription.map((item, index) => (
            <div>
              <h1 className="report_h1" key={index}>
                {item.title}
              </h1>
              {item.datas.map((items, indexs) => (
                <p key={indexs}>{items}</p>
              ))}
            </div>
          ))}
        </div>
      </Modal>
    </div>
  );
};
export default LineYieldAnalyseHeader;
